import React, { FC,
    // useEffect,useState
} from 'react'
// import { useParams } from 'react-router-dom'
// import { getQuestionService } from '../../../service/question.ts'
import useLoadQuestionData from '../../../hooks/useLoadQuestionData.tsx'
import { changeSelectedId } from '../../../store/componentsReducer/index.ts'
import EditCanvas from './EditCanvas.tsx'
import { useDispatch } from 'react-redux'
import LeftPanel from './LeftPanel.tsx'
import RightPanel from './RightPanel.tsx'
import EditHeader from './EditHeader.tsx'
import { useTitle } from 'ahooks'
import useGetPageInfo from './../../../hooks/useGetPageInfo.ts';

import './index.css'
const Edit: FC = ()=>{
    // const {id = ''} = useParams()
    // const [loading,setLoading] = useState(false)
    // const [questionData,setQuestionData] = useState({})
    // useEffect(()=>{
        // 1、
        // async function fn() {
        //     const data = await getQuestionService(id)
        //     console.log('data',data)
        // }
        // fn()
        // 2、
        // axios.get('/api/test').then((res:any) =>{
        //     console.log('res.data',res.data)
        // })
    //     setLoading(true)
    //     const fn = async () =>{
    //         const data = await getQuestionService(id)
    //         console.log('data',data)
    //         setLoading(false)
    //         setQuestionData(data)
    //     }
    //     fn()
    // },[id])

    // const {loading,questionData} = useLoadQuestionData()
    
    // 修改标题
    const { title,isPublished } = useGetPageInfo()
    useTitle(`问卷编辑 - ${title}`)
    const {loading,data} = useLoadQuestionData()
    // console.log('loading,data',loading,data)
    // console.log('data',data)

    // 点击空白处取消选中的蓝色
    const dispatch = useDispatch()
    function clearSelectedId(){
        dispatch(changeSelectedId(''))
    }
    return (
        <div className="editContainer">
            {/* {loading ? <p>edit-loading</p> : <div>{JSON.stringify(data)}</div>} */}
            {/* 头部 */}
            <div className="contentHeader">
                <EditHeader />
            </div>
            <div className="contentWrapper">
                <div className="content"> 
                    {/* 左边 */}
                    <div className="left">
                        <LeftPanel />
                    </div>
                    <div className="main" onClick={()=> clearSelectedId()}>
                        <div className="canvasWrapper" >
                            <div style={{height:'900px'}}>
                                <EditCanvas loading={loading} />
                            </div>
                        </div>
                    </div>
                    {/* 右边 */}
                    <div className="right">
                        <RightPanel />
                    </div>
                </div>
            </div>
        </div>
    )
}


export default Edit